<template>
	<view class="serve" >
		<view class="serve_nav" :style="{'paddingTop':StatusBar + 'px'}">
			<view class="nav_back" @click="navigateBack()">
				<text class="iconfont icon-Left"></text>
			</view>
		</view>
		<view class="serve_list">
			<view class="list_item" v-for="(item, index) in serve_data" :key="item.id"  @click="click_image(serve_data, index)">
				<view class="item_image">
					<image :src="item.img" mode=""></image>
				</view>
				<view class="item_bottom">
					<view class="bottom_name">{{item.name}}</view>
					<view class="bottom_btn">联系客服</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { serve_list } from '@/api/index'
	export default {
		data() {
			return {
				serve_data: []
			}
		},
		onLoad() {
			this.serve_list()
		},
		methods: {
			click_image(serve_data, index) {
				serve_data = serve_data.map(item => item.img);
				uni.previewImage({
					urls: serve_data, //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: index, // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
			async serve_list(){
				let data = await serve_list()
				if(data) {
					this.serve_data = data.data
				}
			},
			tapUrl(url) {
				if(url) {
					location.href = url
				}
			}
		}
	}
</script>

<style>

</style>

<style lang="scss" scoped>
.serve {
	height: 100vh;
	display: flex;
	flex-direction: column;
	.serve_nav {
		width: 100%;
		height: 336rpx;
		background: url(~@/static/serve/nav.png) no-repeat;
		background-size: 100%;
		.nav_back {
			margin: 40rpx;
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background: #FFD026;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
			font-size: 30rpx;
			font-weight: bold;
			.iconfont {
				margin-left: -4rpx;
			}
		}
	}
	.serve_list {
		z-index: 999;
		background: #fff;
		margin-top: -48rpx;
		flex: 1;
		overflow-y: scroll;
		box-sizing: border-box;
		padding: 24rpx 32rpx;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		.list_item {
			float: left;
			width: 332rpx;
			height: 232rpx;
			background: #FFE78F;
			border-radius: 28rpx;
			box-sizing: border-box;
			padding: 12rpx 12rpx 0;
			margin-bottom: 16rpx;
			&:nth-child(2n) {
				margin-left: 22rpx;
			}
			.item_image {
				width: 100%;
				height: 168rpx;
				overflow: hidden;
				border-radius: 24rpx;
				border: 4rpx solid #FFEBAE;
				box-sizing: border-box;
				image {
					width: 100%;
					height: 100%;
				}
			}
			.item_bottom {
				display: flex;
				align-items: center;
				box-sizing: border-box;
				padding: 6rpx 16rpx 0 10rpx;
				.bottom_name {
					font-size: 20rpx;
					color: #22150B;
					font-weight: bold;
				}
				.bottom_btn {
					width: 132rpx;
					height: 40rpx;
					background: rgba(255,255,255,0.5);
					border-radius: 60rpx;
					font-size: 24rpx;
					color: #FF8801;
					display: flex;
					align-items: center;
					justify-content: center;
					margin-left: auto;
				}
			}
		}
	}
}

</style>
